<template>
  <div>
    <bread-crumb :one="'系统管理'" :two="'菜单导航'"></bread-crumb>

    <datagrid :config="dataGrid">
      <div class="toolbar" slot="toolbar">
        <el-button type="primary" @click="handleRefresh()">刷新</el-button>
        <el-button type="primary" @click="handleAddRow()">新增</el-button>
        <el-button type="primary" @click="handleEditRow()">编辑</el-button>
        <el-button type="primary" @click="handleDelete(false)">删除</el-button>
        <el-button type="primary" @click="handleSaveAll()">保存</el-button>
      </div>
    </datagrid>
  </div>
</template>

<script>
  import BreadCrumb from "@/components/BreadCrumb.vue";
  import Datagrid from "@/components/EasyuiDatagrid.vue";
  import {easyui} from "@/core";
  import utils from "@/utils";

  export default {
    components: {
      BreadCrumb,
      Datagrid
    },
    mixins: [easyui],
    data () {
      return {
      	API: {
      		query: "/privilege/menus",
          del: "/gafe/del_server"
        },
        dataGrid: {
      		id: "#treeTable",
          type: "treegrid",
          edit: true,
          url: "./static/treegrid_data2.json",
          rownumbers: true,
//          pagination: true,
          fitColumns: true,
          idField: "id",
          treeField: "name",
          animate: true,
          height: 400,
          columns: [[
            {field: "name", title: "Task Name", align: "left", halign: "center", width: 200, editor:"textbox"},
            {field: "persons", title: "Persons", align: "center", editor:"numberbox"},
            {field: "begin", title: "Begin Date", align: "center", width: 150, editor: "datebox"},
            {field: "end", title: "End Date", align: "center", width: 150, editor: "datebox"},
            {field: "progress", title: "Progress", align: "center", width: 150, editor:"numberbox"}
          ]]
        }
      }
    }
  }
</script>

<style scoped>
  .toolbar {
    margin-bottom: 20px;
  }
</style>
